<template>
    <view class="page">
        <view class="title"> 
            <view class="top">
                <view class="top-item">预充值卡</view>
                <view class="top-items">{{iccid}}</view>
            </view>
            <view class="yuer">  ￥{{simInfo.simAmount}}</view>
            <view class="smallyue">卡内余额(元)</view>
            <view class="cz" @click="toRecharge">充值本卡</view>
            <view class="bot">
                <view class="bot-left">我的优惠券：￥{{simInfo.simSaleAmount}}</view>
                <view class="bot-right" @click="detailsTo">详情</view>
            </view>
        </view>
        <image src="./../../static/img/icon03.png" alt="" class="img">
    </view>
</template>
<script>
export default{
    data(){
        return{
           userAccount: {},
           simInfo: {},
           iccid:uni.getStorageSync('iccid') || '',
        }
    },
    created() {
    	this.$api.account({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
    		this.simInfo = res.data
    	})
    },
    methods:{
		toRecharge(){
			uni.navigateTo({
				url:'/pages/recharge/index'
			})
		},
		detailsTo(){
			uni.navigateTo({
				url:'/pages/coupon/index'
			})
		}
    }
}
</script>

<style lang="scss" scoped>
.page{
    padding:0 26upx;
    background: linear-gradient(180deg, #3980F9 0%, rgba(244, 246, 250, 1) 480upx);
    height:calc(100% - 42upx);
    padding-top:42upx;
    position: relative;
    .title{
        width: 700upx;
        height: 476upx;
        background: #FFFFFF;
        border-radius: 20upx;
        margin: 0 auto;
        position: relative;
        .top{
            display: flex;
            height: 114upx;
            padding-left:22upx;
            align-items: center;
            background: linear-gradient(180deg, #B1CEFF 0%, #FFFFFF 100%);
            border-radius: 20upx 20upx 0px 0px;
            .top-item{
                font-size: 24upx;
                font-family: HarmonyOS_Sans_SC;
                color: #FFFFFF;
                text-align: center;
                line-height: 34upx;
                width:124upx;
                background: url('./../../static/img/icon04.png') no-repeat center;
                background-size:100% 100%;
            }
            .top-items{
                font-size: 32upx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #28292D;
                line-height: 44upx;
                padding-left:20upx;
            }
        }
        .yuer{
            height: 100upx;
            font-size: 72upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #28292D;
            text-align: center;
            line-height: 100upx; 
            margin-top:72upx;
        }
        .smallyue{
            text-align: center; 
            height: 40upx;
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 40upx;
        }
        .cz{
            width:176upx;
            height: 62upx;
            background: url('./../../static/img/icon05.png') no-repeat center;
            background-size:100% 100%;
            position: absolute;
            right: 0;
            top: 40%;
            text-align: center;
            line-height:60upx;
            color: #fff;
        }
        .bot{
            width:88%;
            margin:54upx auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top:2upx solid #F3F3F3;
            padding-top:28upx;
            .bot-right{
               color:#397FF9;
            }
        }
    }
    .img{
        width:96%;
        height: 180upx;
        margin: 40upx auto;
        display: block;
    }
}
</style>